<template>
	<view class="content">
		<view><button open-type="contact">点我联系客服</button></view>
		<view>
			<view style="text-align: left;" @click="downTestFn">1. ajax的使用</view>
			<button type="default" @click="setHeaderFn">设置ajax header</button>
			<button type="default" @click="getFetchFn">get请求</button>
			<button type="default" @click="postFetchFn">post请求</button>
		</view>
		<view>
			<view>2. scope的使用 (限频接口：wx.getSetting ， wx.getUserInfo)</view>
			<button type="default" @click="getScopeFn()">获取录音权限 - 缓存查询结果</button>
			<button type="default" @click="getScopeFn(true)">获取录音权限 - 强制实时查询</button>
		</view>
		<view>
			<view>3. 工具函数的使用</view>
			<i>输入手机号:</i>
			<input type="number" v-model="phone" style="border: 1rpx solid #000;" />
			<button type="default" @click="checkPhoneFn">校验手机号合法性</button>
		</view>
		<view>
			<view>4. 查看当前环境配置</view>
			<button type="default" @click="getConfigFn">获取环境配置</button>
		</view>
		<view>
			<view>5. 自定义当前页面分享配置</view>
			<button type="default" @click="setShareFn">设置分享</button>
		</view>
		<view>
			<view>6. loading的使用</view>
			<view>加载进度:{{ percent }}</view>
			<button type="default" @click="beginLoadFn">开始加载图片资源</button>
		</view>
		<view @click="changePropsFn">
			<view>7. image的使用（点击我试试看）</view>
			<view>无论该图片是否在loading内加载过，均可传入你在/loading/images.js中配置的路径：</view>
			<cce-image :src="src1" :styles="style1"></cce-image>
			<cce-image src="0107.jpg" styles="width:100rpx;height:100rpx"></cce-image>
			<cce-image src="https://portrait.gitee.com/uploads/avatars/user/678/2034981_shaynewebmaster_1623650943.png" class="cceimage3"></cce-image>
		</view>
		<view>
			<view>8. 策略集的使用</view>
			<button type="default" @click="strategyFn">策略校验</button>
		</view>
		<view>
			<view>9. 防抖，节流，柯里化</view>
			<button type="default" @click="debounceFn">防抖</button>
			<button type="default" @click="throttleFn">节流</button>
			<button type="default" @click="curryFn">柯里化</button>
		</view>
		<view>
			<view>10. 序列帧</view>
			<view>加载进度:{{ percent2 }}</view>
			<button type="default" @click="loadingMovieClip">加载所有序列帧资源</button>
			<button type="default" @click="newMoiveClip1">实例1号并播放</button>
			<button type="default" @click="newMoiveClip2">实例2号并播放</button>
			<br />
			<canvas canvas-id="movieClip1" type="2d" id="movieClip1"></canvas>
			<canvas canvas-id="movieClip2" type="2d" id="movieClip2"></canvas>
		</view>
	</view>
</template>

<script>
const config = require('@/config');
const { cce_ajax_interceptor } = require('@/api');
import CCE_loading from '@/utils/cce_loading';
import resources from '@/loading/resources.js';
import { mapGetters, mapActions } from 'vuex';
import strategy from '@/utils/strategy.js';

import MK_animateSheet from '@/utils/cce_movieclip.js'; //引入序列帧方法集

export default {
	data() {
		return {
			percent: '0%',
			percent2: '0%',
			phone: '',
			src1: '0200.jpg',
			style1: 'width:200rpx;height:100rpx',
			movieClipData1: [],
			movieClipData2: []
		};
	},
	onLoad() {
		const _self = this;
	},
	mounted() {
		const _self = this;
	},
	computed: {
		...mapGetters(['mainName']),
		...mapGetters('demo', ['demoName'])
	},
	methods: {
		...mapActions(['changeName']),
		...mapActions('demo', ['demoChangeName']),
		downTestFn() {
			for (var i = 0; i < 30; i++) {
				wx.getImageInfo({
					src: 'http://www.ccegroup.cn/images/works/work22.jpg',
					success: function(e) {
						console.log('success');
					},
					fail: function(e) {
						//加载失败，则返回原始路径
						console.log(e);
					},
					complete: function(e) {
						console.log(e);
					}
				});
			}
		},
		changePropsFn() {
			this.src1 = '0222.jpg';
			this.style1 = 'width:200rpx;height:100rpx';
		},
		async setHeaderFn() {
			cce_ajax_interceptor({
				header: {
					Authorization: 'your jwt'
				},
				timeout: 9000 //超时时间，单位 ms
			});
		},
		async getFetchFn() {
			// async式的语法
			const data = await this.$cce_ajax.getTest();
			console.log(data);
		},
		postFetchFn() {
			// then式的语法
			this.$cce_ajax
				.postTest({
					name: 'shayne'
				})
				.then(res => {
					console.log(res);
				});
		},
		beginLoadFn() {
			const _self = this;
			const loading1 = new CCE_loading();
			loading1.startLoading(resources, function(percent) {
				_self.percent = percent + '%';
				// console.log(_self.percent);
			});
			loading1.onComplete = function(ASSET) {
				uni.showToast({
					title: 'loading完成'
				});
				console.log(ASSET);
			};
		},
		async getScopeFn(force = false) {
			console.log(force);
			const scopeStatus = await this.$cce_checkScope('scope.record', {
				force //不强制查询，会缓存首次实时授权状态
			});
			if (!scopeStatus) return void 0;
			uni.showToast({
				title: '获取录音权限成功'
			});
		},
		checkPhoneFn() {
			const verifyPhone = this.$cce_toolkit.verify_phone(this.phone),
				title = verifyPhone ? '手机号验证成功' : '手机号验证失败';
			uni.showToast({
				icon: 'none',
				title
			});
		},
		getConfigFn() {
			const _self = this;
			uni.showModal({
				title: '环境配置',
				showCancel: false,
				content: JSON.stringify(config) || _self.$cce_envConfig
			});
		},
		setShareFn() {
			const relativePath = '0240.jpg';
			this.configShareFn({
				imageUrl: `${this.$cce_envConfig.assets}${relativePath}`,
				title: '动态设置分享标题',
				path: '/pages/demo/demo?shareid=123'
			});
		},
		strategyFn() {
			const phoneNumber = '18877776666';
			// 策略集的具体可用选项和个性化配置，请查看：@/utils/strategy.js
			var result = strategy.verify({
				phone: [{ rule: 'isRequired', value: phoneNumber, message: '手机号不能为空' }, { rule: 'isMobile', value: phoneNumber, message: '手机号格式错误！' }],
				address: [{ rule: 'isRequired', value: '', message: '地址不能为空' }],
				name: [{ rule: 'minLength', value: ['lucoky', 6], message: '姓名最小长度为6' }],
				code: [{ rule: 'checkCode', value: '83733', message: '请正确输入6位验证码' }]
			});
			if (result) {
				uni.showToast({
					icon: 'none',
					title: result.errMsg
				});
				console.warn(result);
				return;
			}
			// 验证通过
			console.log('验证通过');
		},
		debounceFn() {
			if (!this.debounce) {
				this.debounce = this.$cce_toolkit.debounce(function() {
					console.log('debounce execute');
				}, 1000);
			}
			this.debounce();
		},
		throttleFn() {
			if (!this.throttle) {
				this.throttle = this.$cce_toolkit.throttle(function() {
					console.log('throttle execute');
				}, 1000);
			}
			this.throttle();
		},
		curryFn() {
			if (!this.curry) {
				const add = function() {
					return [...arguments].reduce((total, num) => {
						return total + num;
					}, 5);
				};
				this.curry = this.$cce_toolkit.curry(add, 100);
			}
			console.log(this.curry(100, 200, 300));
		},
		loadingMovieClip() {
			const _self = this;
			const loading1 = new CCE_loading();

			//开场动画资源
			let showImg1 = loading1.addImgSheet({
				imgPrefix: '',
				imgType: 'jpg',
				start: '0001',
				length: 100,
				step: 1,
				mask: '0000'
			});

			let showImg2 = loading1.addImgSheet({
				imgPrefix: '',
				imgType: 'jpg',
				start: '0100',
				length: 100,
				step: 1,
				mask: '0000'
			});

			loading1.startLoading([], function(percent) {
				_self.percent2 = percent + '%';
			});

			loading1.onComplete = function(ASSET) {
				uni.showToast({
					title: 'loading完成'
				});
				_self.movieClipData1 = showImg1;
				_self.movieClipData2 = showImg2;
			};
		},
		newMoiveClip1() {
			const _self = this;
			console.log(_self.movieClipData1);
			const MK1 = new MK_animateSheet({
				id: '#movieClip1',
				imgList: _self.movieClipData1,
				times: 16,
				loop: false
			});
			MK1.play();
		},
		newMoiveClip2() {
			const _self = this;
			const MK2 = new MK_animateSheet({
				id: '#movieClip2',
				imgList: _self.movieClipData2,
				times: 16,
				loop: true
			});
			MK2.play();
		}
	}
};
</script>

<style lang="scss" scoped>
@import './custom'; /* 导入scss部分文件 */
$custom-border: 1rpx solid #0f0; /* 自定义变量 */
@mixin link-colors($normal: #ccc) {
	color: $normal;
} /* 混合器 */

.content {
	display: flex; // 这种注释内容不会出现在生成的css文件中
	flex-direction: column; /* 这种注释内容会出现在生成的css文件中 */
	align-items: flex-start;
	justify-content: space-around;
	@if 1 < 3 {
		border: 2rpx dotted;
	} /* if条件语法 */
	&:active {
		// background-color: #007aff;
	} /* 父选择器的使用 */
	> view {
		position: relative;
		/* 直接子选择器 */
		margin-left: 10rpx * 2; /* 四则运算 */
		margin-bottom: 50rpx;
		padding: 5rpx;
		border: $custom-border;
		@include link-colors(red);
		view ~ button {
			/* 同层全体组合选择器 */
			display: inline-block;
			background-color: #c0c0c0;
			margin: 4rpx;
		}
		.cceimage3 {
			position: absolute;
			bottom: 0;
			right: 0;
			transform-origin: 100% 100%;
			transform: scale(0.6) skew(20deg);
		}
		#movieClip1,
		#movieClip2 {
			display: inline-block;
			width: 300rpx;
			height: 600rpx;
			margin: 0 2rpx;
			border: 1rpx solid #dd524d;
			box-sizing: border-box;
		}
	}
} /* 嵌套 */
</style>
